<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF 翻译工具</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 500px; margin: auto; }
        label { font-weight: bold; display: block; margin-top: 10px; }
        input, select, button { width: 100%; padding: 8px; margin-top: 5px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>PDF 翻译工具</h2>
        <form id="uploadForm">
            <label for="pdfFile">上传 PDF 文件：</label>
            <input type="file" id="pdfFile" accept="application/pdf" required>

            <label for="fileFormat">选择文件格式：</label>
            <select id="fileFormat">
                <option value="pdf">PDF</option>
                <option value="markdown">Markdown</option>
            </select>

            <label for="language">目标语言：</label>
            <select id="language">
                <option value="中文">中文</option>
                <option value="英文">英文</option>
                <option value="法语">法语</option>
            </select>

            <label for="pages">指定页码（可选）：</label>
            <input type="text" id="pages" placeholder="例：1,2,5-7">

            <button type="button" onclick="uploadFile()">提交翻译</button>
        </form>

        <a id="downloadLink" style="display:none; margin-top: 10px;" download>下载翻译文件</a>
    </div>

    <script>
        async function uploadFile() {
            const fileInput = document.getElementById('pdfFile');
            const file = fileInput.files[0];
            if (!file) { alert('请选择 PDF 文件！'); return; }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('file_format', document.getElementById('fileFormat').value);
            formData.append('target_language', document.getElementById('language').value);
            if (document.getElementById('pages').value != '')
                formData.append('pages', document.getElementById('pages').value);

            const response = await fetch('http://127.0.0.1:8001/translate_pdf/', {
                method: 'POST',
                body: formData
            });

            if (!response.ok)
                throw new Error('请求失败');
            const result = await response.json();
            if (result.download_filename) {
                const downloadLink = document.getElementById('downloadLink');
                downloadLink.href = `http://127.0.0.1:8001/download/${result.download_filename}`;
                downloadLink.innerText = '下载翻译文件';
                downloadLink.style.display = 'block';

                // 使用 window.open 来在新标签页打开下载链接
                downloadLink.onclick = (event) => {
                    event.preventDefault(); // 阻止默认的点击行为
                    window.open(downloadLink.href, '_blank'); // 在新标签页中打开下载链接
                };
            } else {
                alert('翻译失败，请重试！');
            }
        }
    </script>
</body>
</html>
